.s-picker {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  background: $picker-background;

  &-wrap {
    ::v-deep {
      .s-popup {
        &__wrap {
          height: $picker-height;
        }
      }
    }
  }

  &__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: $picker-header-height;
    border-color: $picker-header-border-color;

    &-left,
    &-right {
      position: relative;
      z-index: 2;
      height: 100%;
    }
  }

  &__title {
    font-size: $picker-title-font-size;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & &__action {
    font-size: $picker-action-font-size;
    height: 100%;
    padding: $picker-action-padding;
  }

  & &__cancel-action {
    color: $picker-cancel-action-color;
  }

  & &__confirm-action {
    color: $picker-confirm-action-color;

    &--disabled {
      color: $picker-confirm-action-disabled-color;
    }
  }

  &__body {
    overflow: hidden;
    flex: 1;
  }

  &__picker-view {
    height: 100%;
  }

  &__option {
    font-size: $picker-option-font-size;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: $picker-option-padding;
    color: $picker-option-color;

    &-text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  ::v-deep &__mask {
    background: $picker-mask-background;
    background-repeat: no-repeat;
    background-position: top, bottom;
  }

  &__indicator {
    height: $picker-indicator-height;
  }
}